<template>
	<view class="toruist-item uni-flex">
		<view class="toruist-name">
			{{info.name}}
		</view>
		<view class="toruist-info">
			<view class="phone uni-flex">
				<text class="phone-label">
					手机号
				</text>
				<text>
					{{info.phone}}
				</text>
			</view>
			<view class="card uni-flex">
				<text>
					证件号
				</text>
				<text>
					{{info.certificateNum}}
				</text>
			</view>
		</view>
		<view class="toruist-edit">
			<button type="default" size="mini" @click="onClick">编辑</button>
		</view>
	</view>
</template>

<script>
	export default{
		name:"TouristItem",
		props: {
			info: {
				type: Object,
				default: ()=>{
					return {
						name:'',
						phone:'',
						certificateNum:''
					}
				}
			},
		},
		methods: {
			onClick() {
				this.$emit('click',this.info)
			}
		},
	}
</script>

<style>
	.toruist-item{
		justify-content: space-around;
		align-items: center;
		/* background-color: #0086B3; */
		padding: 20rpx 0;
		margin: 20rpx 0;
		border-bottom: 1px solid #ccc;
	}
	.toruist-info{
		flex: 0 1 60%;
	}
	.phone-label{
		letter-spacing: 12rpx;
	}
	.phone,.card{
		justify-content:space-between;
		font-size: .8rem;
	}
</style>
